//动态渲染API分类
function DynamicRendering() {
    //模拟获取api详细内容
    let dynamic = [
        { text: "全部", tishi: "身份证实名" },
        { text: "生活服务", tishi: "快乐" },
        { text: "金融科技", tishi: "毁灭吧" },
        { text: "交通地理", tishi: "累了" },
        { text: "充值缴费", tishi: "又要充钱" },
        { text: "数据智能", tishi: "机器人毁灭世界" },
        { text: "企业工商", tishi: "工厂难受" },
        { text: "应用开发", tishi: "神级运用" },
        { text: "电子商务", tishi: "直播带货" },
        { text: "吃喝玩乐", tishi: "瓜子零食" },
        { text: "文娱视频", tishi: "快手，斗鱼" },
        { text: "免费接口大全", tishi: "全部都是接口" },
        { text: "短信", tishi: "没有短信" },
        { text: "汽车", tishi: "兰博基尼" },
        { text: "核验", tishi: "阴性" },
        { text: "最新发布", tishi: "永劫无间" },
        { text: "API私有化部署", tishi: "API全是我的" }
    ]
    let spanHtml = ``
    let section = document.querySelector(".serve")
    dynamic.forEach((i, j) => {
        spanHtml += `<span>${dynamic[j].text}</span>`
    });
    section.innerHTML = spanHtml
    let span = document.querySelectorAll(".serve span")
    span[0].classList.add("active")
    span.forEach((i, j) => {
        i.setAttribute("ed", dynamic[j].tishi)
    });
}
DynamicRendering()


//动态渲染APi详细内容
let Details = [
    [
        { src: "./images/API_01.jpg", title: "2021出行防疫政策指南", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_02.jpg", title: "身份证实名", pay: "0.2000", EnterpriseDedicated: true },
        { src: "./images/API_03.jpg", title: "天气预报", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_04.jpg", title: "银行卡四元素校验", pay: "0.3360", EnterpriseDedicated: true },
        { src: "./images/API_05.jpg", title: "短信API服务", pay: "0.0400", EnterpriseDedicated: true },
    ],
    [
        { src: "./images/API_01.jpg", title: "剑来", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_02.jpg", title: "一剑开天", pay: "0.2000", EnterpriseDedicated: true },
        { src: "./images/API_03.jpg", title: "宁姚", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_04.jpg", title: "阿良", pay: "0.3360", EnterpriseDedicated: true },
        { src: "./images/API_05.jpg", title: "齐景春", pay: "0.0400", EnterpriseDedicated: true },
    ],
    [
        { src: "./images/API_01.jpg", title: "永劫无间", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_02.jpg", title: "迦南", pay: "0.2000", EnterpriseDedicated: true },
        { src: "./images/API_03.jpg", title: "天海", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_04.jpg", title: "嘎了", pay: "0.3360", EnterpriseDedicated: true },
        { src: "./images/API_05.jpg", title: "簌簌粟粟", pay: "0.0400", EnterpriseDedicated: true },
    ],
    [
        { src: "./images/API_01.jpg", title: "芭比q了", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_02.jpg", title: "gggg", pay: "0.2000", EnterpriseDedicated: true },
        { src: "./images/API_03.jpg", title: "遇见雪", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_04.jpg", title: "还行", pay: "0.3360", EnterpriseDedicated: true },
        { src: "./images/API_05.jpg", title: "全是api", pay: "0.0400", EnterpriseDedicated: true },
    ],
    [
        { src: "./images/API_01.jpg", title: "g了gl", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_02.jpg", title: "yyds", pay: "0.2000", EnterpriseDedicated: true },
        { src: "./images/API_03.jpg", title: "剑指s11", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_04.jpg", title: "可以可以", pay: "0.3360", EnterpriseDedicated: true },
        { src: "./images/API_05.jpg", title: "没有没有", pay: "0.0400", EnterpriseDedicated: true },
    ],
    [
        { src: "./images/API_01.jpg", title: "第五页了", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_02.jpg", title: "好累", pay: "0.2000", EnterpriseDedicated: true },
        { src: "./images/API_03.jpg", title: "梦里都是渲染", pay: "0", EnterpriseDedicated: false },
        { src: "./images/API_04.jpg", title: "效果又没成功", pay: "0.3360", EnterpriseDedicated: true },
        { src: "./images/API_05.jpg", title: "麻了麻了", pay: "0.0400", EnterpriseDedicated: true },
    ]
]
function RenderDetails(ULDetails) {
    let div = document.querySelector(".API-detail .content")
    let ul = ``
    ULDetails.forEach((i, j) => {
        ul += `<ul>
        <li class="${ULDetails[j].EnterpriseDedicated ? "Enterprise-dedicated" : ""}">
        <a href="./API-details.html">
            <div class="content-top">
            <img src="${ULDetails[j].src}">
            <p>${ULDetails[j].title}</p>
            <span class="${ULDetails[j].pay == 0 ? "green" : "red"}">${ULDetails[j].pay == 0 ? "免费" : `￥${ULDetails[j].pay}/次`}</span>
            </div>
        </a>
            <div class="apply-for">申请数据</div>
        </li>
        <li class="${ULDetails[j].EnterpriseDedicated ? "Enterprise-dedicated" : ""}">
        <a href="./API-details.html">    
            <div class="content-top">
                <img src="${ULDetails[j].src}">
                <p>${ULDetails[j].title}</p>
                <span class="${ULDetails[j].pay == 0 ? "green" : "red"}">${ULDetails[j].pay == 0 ? "免费" : `￥${ULDetails[j].pay}/次`}</span>
            </div>
            </a>
            <div class="apply-for">申请数据</div>
        </li>
        <li class="${ULDetails[j].EnterpriseDedicated ? "Enterprise-dedicated" : ""}">
        <a href="./API-details.html">    
            <div class="content-top">
                <img src="${ULDetails[j].src}">
                <p>${ULDetails[j].title}</p>
                <span class="${ULDetails[j].pay == 0 ? "green" : "red"}">${ULDetails[j].pay == 0 ? "免费" : `￥${ULDetails[j].pay}/次`}</span>
            </div>
            </a>
            <div class="apply-for">申请数据</div>
        </li>
        <li class="${ULDetails[j].EnterpriseDedicated ? "Enterprise-dedicated" : ""}">
        <a href="./API-details.html">    
            <div class="content-top">
                <img src="${ULDetails[j].src}">
                <p>${ULDetails[j].title}</p>
                <span class="${ULDetails[j].pay == 0 ? "green" : "red"}">${ULDetails[j].pay == 0 ? "免费" : `￥${ULDetails[j].pay}/次`}</span>
            </div>
            </a>
            <div class="apply-for">申请数据</div>
        </li>
    </ul>`

        div.innerHTML = ul
    });
}
RenderDetails(Details[0])

// API服务鼠标点击样式改变
function APIServe() {
    let span = document.querySelectorAll(".serve span")
    let title = document.querySelector(".API-detail .title span")
    let input = document.querySelector(".API-detail .title input")
    span.forEach((i, j) => {
        i.addEventListener("click", function () {
            span.forEach((k) => {
                k.classList.remove("active")
            });
            i.classList.add("active")
            title.textContent = i.textContent
            input.placeholder = i.getAttribute("ed")
        })
    });
}
APIServe()




// API详细内容移入，移出效果
function APIMoveOut() {
    let li = document.querySelectorAll(".API-detail .content ul li")
    let divtop = document.querySelectorAll(".API-detail .content ul li .content-top")
    let div = document.querySelectorAll(".API-detail .content ul li .apply-for")
    li.forEach((i, j) => {
        i.addEventListener("mouseenter", function () {
            div.forEach((k) => {
                k.classList.remove("on")
            });
            divtop.forEach((s) => {
                s.classList.remove("se")
            });
            div[j].classList.add("on")
            divtop[j].classList.add("se")
        })
        i.addEventListener("mouseleave", function () {
            div.forEach((k) => {
                k.classList.remove("on")
            });
            divtop.forEach((s) => {
                s.classList.remove("se")
            });
        })
    });
}
APIMoveOut()

//分页器
// function sorter() {
//     let span = document.querySelectorAll(".Switch-the-page .iteam")

// }
// sorter()

//点击下一页跳转到第二页
function skip() {
    let div1 = document.querySelector(".Switch-the-page .sorter-previous")
    let div2 = document.querySelector(".Switch-the-page .sorter-next")
    let a1 = document.querySelector(".Switch-the-page .sorter-previous a")
    let a2 = document.querySelector(".Switch-the-page .sorter-next a")
    let span = document.querySelectorAll(".Switch-the-page .iteam")
    let index = 0
    span.forEach((i, j) => {
        i.addEventListener("click", function () {
            span.forEach((k) => {
                k.classList.remove("pitch-on")
            });
            i.classList.add("pitch-on")
            RenderDetails(Details[j])
            APIMoveOut()
            index = j
        })
    });
    a1.addEventListener("click", function () {
        if (index == 3) {
            div1.classList.add("active")
        }
        span.forEach((k) => {
            k.classList.remove("pitch-on")
        });
        index++
        span[index].classList.add("pitch-on")
        if (index == 4) {
            div2.classList.remove("active")
        }
        RenderDetails(Details[index])
        APIMoveOut()
    })
    a2.addEventListener("click", function () {
        if (index == 4) {
            div2.classList.add("active")
        }
        span.forEach((k) => {
            k.classList.remove("pitch-on")
        });
        index--
        span[index].classList.add("pitch-on")
        if (index == 3) {
            div1.classList.remove("active")
        }
        RenderDetails(Details[index])
        APIMoveOut()

    })
}
skip()


//模态框
// 点击切换功能页面
function click() {
    let span = document.querySelectorAll(".main .main-right .register");
    let div = document.querySelectorAll(".main .main-right .aa")
    span.forEach((i, j) => {
        i.addEventListener("click", function () {
            span.forEach((k) => {
                k.classList.remove("active")
            });
            i.classList.add("active")
            div.forEach((s) => {
                s.classList.remove("on")
            });
            div[j].classList.add("on")
        })
    });
}
click()

//点击跳转到API-details页面
function details() {
    let lis = document.querySelectorAll(".API-detail .content ul li .content-top")
    lis.forEach((i, j) => {
        i.addEventListener("click", function () {
            location.href = "file:///C:/Users/XS/Desktop/JavaScript/source-code-big-data/API-details.html"
        })
    });
}
details()
//点击模态框出来
function appear() {
    let div = document.querySelectorAll(".API-detail .content ul li .apply-for")
    let modal = document.querySelector(".main")
    div.forEach((i, j) => {
        i.addEventListener("click", function () {
            modal.style.display = "block"
        })
    });
}
appear()